<template>
  <div v-if="cinema" class="subpage">
    <my-head :title="cinema.name"></my-head>
    <div class="text-top">
      <p>
        {{ cinema.address }}
      </p>
    </div>
    <div class="banner">
      <div class="swipe" v-if="films[current]">
        <img :src="films[current].poster" class="xuimg" alt="" />
        <my-swiper id="onebanner" class="onebanner" :options="options">
          <my-swiper-item v-for="(l, i) in films" :key="i">
            <img :src="l.poster" alt="" class="himg" />
          </my-swiper-item>
        </my-swiper>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      cinema: null,
      films: [],
      schedules: [],
      options: {
        observer: true,
        slideToClickedSlide: true,
        effect: "coverflow",
        slidesPerView: 2.8,
        centeredSlides: true,
        spaceBetween: 40,
        coverflowEffect: {
          rotate: 5,
          stretch: 10,
          depth: 340,
          modifier: 2,
          slideShadows: false,
        },
        on: {
          slideChange: function () {
            console.log("改变了，activeIndex为" + this.activeIndex);
            that.current = this.activeIndex;
          },
        },
      },
    };
  },
  watch: {
    current(v) {
      console.log(v);
      this.getschedules(this.films[v].filmId, this.$route.params.date);
    },
  },
  methods: {
    async getCinemaData() {
      let res = await this.$ajax.getMZdata(
        {
          cinemaId: this.$route.params.cinemaId,
        },
        {
          "X-Host": "mall.film-ticket.cinema.info",
        }
      );
      this.cinema = res.data.cinema;
    },
    async getFilms() {
      let res = await this.$ajax.getMZdata(
        {
          cinemaId: this.$route.params.cinemaId,
        },
        {
          "X-host": "mall.film-ticket.film.cinema-show-film",
        }
      );
      this.films = res.data.films;
    },
    async getschedules(filmId, date) {
      let res = await this.$ajax.getMZdata(
        {
          cinemaId: this.$route.params.cinemaId,
          filmId,
          date,
        },
        {
          "X-Host": "mall.film-ticket.schedule.list",
        }
      );
      this.schedules = res.data.schedules;
    },
  },
  mounted() {
    this.getCinemaData();
    this.getFilms();
  },
};
</script>


<style lang="scss" scoped>
.text-top p {
  font-size: 12px;
  text-align: center;
}
.banner {
  .swipe {
    width: 100%;
    height: 160px;
    padding: 15px 0;
    position: relative;
    .xuimg {
      width: 100%;
      height: 160px;
      overflow: hidden;
      -webkit-filter: blur(14px); // 背景虚化
      filter: blur(14px);
    }
    .onebanner {
      width: 100%;
      height: 100%;
      padding: 20px 0;
      top: 0;
      left: 0;
      position: absolute;
      .himg {
        width: 90px;
        height: 130px;
      }
    }
  }
}

.film-info {
  padding: 30px;
}
</style>